import React, { Component } from "react";
import { connect } from "react-redux";
import "./SetPayPassword.scss";
import yhTools from "../../../tools/yh";
import { InterfaceG } from "../../../config/Config";
import { getPayDatas } from "../../../Redux/Action/nativeDatas/nativeDatas";
import MainLayout from "../../../component/mainLayout/mainLayout";
import CryptographicNumberInput from "../../viewXHB/paypwdVerify/CryptographicNumberInput";
import { Toast } from "antd-mobile";

class SetPayPassword extends Component {
	constructor(props) {
		super(props);
		this.state = {
			/** 当前支付密码阶段 0 是第一次输入，1是第二次输入 */
			pwdState: 0,
			password: "",
			ispassword: false,
			repPassword: "",
			isrepPassword: false,
			tips: "",
			n: 1,
			flag: true //默认关闭sdk
		};

		this.pwdref = React.createRef();
		this.cpwdref = React.createRef();
	}

	componentDidMount() {
		// setInterval(() => {
		//     this.setState({n:this.state.n+1},()=>this.pwdref.current.Keyboard.close())
		// }, 5000);
	}

	/** 密码变化事件 */
	onChangePwd(ispassword) {
		if (ispassword) {
			this.setState({ ispassword, pwdState: 1 }, () =>
				this.pwdref.current.Keyboard.close()
			);
		} else {
			this.setState({ ispassword });
		}
	}

	// 提交
	async submit() {
		// await this.closeKeybord();
		const _this = this;
		if (!this.state.isrepPassword) {
			return Toast.info("请再次输入密码", 2);
		}
		Toast.loading("加载中...", 100);
		//console.log(this.state);
		let { password, repPassword } = this.state;
		let objs = {
			url: InterfaceG.xhbSetPassword,
			params: {
				password,
				repPassword
			},
			_alertShow: false
		};
		yhTools.request(objs).then(resp => {
			if (resp.code == "0") {
				if (
					this.props.location.state &&
					this.props.location.state.formType === "signXHB"
				) {
					_this.props.history.replace("/signXHB");
				} else {
					_this.props.history.goBack(); // 默认返回上一页
				}
			} else {
				Toast.info(resp.message, 2);
				_this.setState({
					password: "",
					repPassword: "",
					ispassword: false,
					isrepPassword: false,
					pwdState: 0
				});
				this.pwdref.current.reset();
				this.cpwdref.current.reset();
			}
		});
	}

	gotoNext() {
		// 此处改为返回首页，然后从首页进入付款码页面
		this.props.history.replace({
			pathname: `/payCode`
		});
		// const _that = this;
		// yhTools.openPayView({
		//     "Auth-Header": this.props.getAppPlatformsDatas.authHeaderStr
		// }).then(res => {
		//     let data = res.data;
		//     if (res.status == "1000") {
		//         if (res.platform) {
		//             data = JSON.parse(res.data);
		//         }
		//         if (data.data.result == "1") {
		//             // 金额和商户名称存入redux
		//             _that.props._getPayDatas({
		//                 cashBackAmount: data.data.cashBackAmount,//红包金额
		//                 goodsAmount: data.data.goodsAmount,//商品金额
		//                 couponAmount: data.data.couponAmount,//优惠券金额
		//                 randomAmount: data.data.randomAmount,//随机立减金额
		//                 amount: data.data.amount,//实付金额
		//                 storeName: data.data.storeName,//商户名称
		//             });
		//             window.location.replace("#/paySuccess");
		//         } else if (data.data.result == "2") {
		//             _that.props._getPayDatas({
		//                 failureReason: data.data.failureReason || "",//支付失败原因
		//             });
		//             window.location.replace("#/payFail");
		//         }
		//     }
		// })
	}
	/** 关闭键盘 */
	closeKeybord() {
		return this.cpwdref.current.Keyboard.close();
	}

	render() {
		const headerParams = {
			header: {
				title: "设置支付密码"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: "1" // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="SetPayPassword" onClick={() => this.closeKeybord()}>
					<div
						style={{ display: this.state.pwdState === 0 ? "block" : "none" }}
					>
						<div className="showMsg">请设置支付密码</div>

						<div className="pwd_box">
							<CryptographicNumberInput
								ref={this.pwdref}
								onChange={ispassword => this.onChangePwd(ispassword)}
								onComplete={password => this.setState({ password })}
							/>
						</div>
					</div>
					<div
						style={{ display: this.state.pwdState === 1 ? "block" : "none" }}
					>
						<div className="showMsg">请再次确认支付密码</div>

						<div className="pwd_box">
							<CryptographicNumberInput
								ref={this.cpwdref}
								onChange={isrepPassword => this.setState({ isrepPassword })}
								onComplete={repPassword => this.setState({ repPassword })}
							/>
						</div>

						<div className="btn" onClick={() => this.submit()}>
							完成
						</div>
					</div>

					<div className="warnMsg">{this.state.tips}</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(SetPayPassword);
